<template>
  <div class="newsInfor-container">
    <h4 class="title">{{infor.title}}</h4>
    <div class="subtitle">
      <span>{{infor.time}}前发布</span>
      <span>点赞：{{infor.num}}次</span>
    </div>
    <hr>
    <div class="content" v-html="infor.content"></div>
    <Coment class="newsconment"></Coment>
  </div>
</template>

<script>
import Coment from './conment.vue'
export default {
  data () {
    return {
      id: this.$route.params.id,
      infor: {}
    }
  },
  created () {
    this.getInfor()
  },
  methods: {
    getInfor () {
      this.axios.get('newsInforlist/' + this.id + '.json').then(
        rs => {
          this.infor = rs.data
          // 点赞数式化
          if (this.infor.num >= 1000) {
            if (this.infor.num >= 10000) {
              this.infor.num = parseInt(this.infor.num / 10000) + '万'
            } else {
              this.infor.num = parseInt(this.infor.num / 1000) + '千'
            }
          }
          // 发布时间格式化
          if (this.infor.time >= 60) {
            this.infor.time = parseInt(this.infor.time / 60) + '小时'
          } else {
            this.infor.time += '分钟'
          }
        },
        err => {
          console.log(err)
        }
      )
    }
  },
  components: {
    Coment
  }
}
</script>

<style lang="scss">
  .newsInfor-container{
    text-align: left;
    .title{
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
      color: #c33;
    }
    .subtitle{
      margin: auto;
      width: 80%;
      display: flex;
      justify-content:space-between;
      span{
        font-size: 12px;
        color: #960;
      }
    }
    .content{
     padding: 5px 10px;
     border-bottom: 1px solid #435;
     font-size: 13px;
     color: #201;
      .pic{
        display: block;
        margin: 5px auto;
        width: 80%;
      }
      h6{
        font-size: 13px;
        color: #201;
        font-weight: 700;
      }
      .sm{
        color: #c45;
      }
    }
  }
  .newsconment{
    width: 95%;
    margin: 2px auto;
    .title{
      font-size: 16px;
      text-align: center;
      color: #212;
    }
    textarea{
      width: 100%;
      height: 80px;
    }
  }
</style>
